<template>
  <div class="flex flex-row items-center">
    <span
      class="cursor-pointer"
      :class="{ '!text-color-active': selectedValue === 'RESOLVED' }"
      @click="handleCheck('RESOLVED')"
    >
      <Icon type="icon-yijiejue" class="text-2xl pr-1"></Icon>已解决
    </span>
    <span
      :class="{ '!text-color-active': selectedValue === 'UNRESOLVED' }"
      class="pl-6 cursor-pointer"
      @click="handleCheck('UNRESOLVED')"
    >
      <Icon type="icon-weijiejue" class="text-2xl pr-1"></Icon>未解决
    </span>
  </div>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>
<script setup lang="ts">
import Icon from "/@/components/Icon.vue";
import { useI18n } from "/@/locales/useI18n";
import { ref, watch } from "vue";
const emits = defineEmits(["click"]);
// RESOLVED
// UNRESOLVED
const { t } = useI18n();
const props = defineProps<{
  value: string;
}>();
watch(
  () => props.value,
  (val) => {
    selectedValue.value = val;
  }
);
const selectedValue = ref<string>("");
function handleCheck(val) {
  emits("click", val);
  selectedValue.value = val;
}
</script>

<style lang="less"></style>
